<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="搜索.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- 如需要使用图标则导入以下框架 通过给span添加类名 ，类名前加上fa -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <div class="close-btn">
        <span class="fa fa-times"></span>
    </div>
    <div class="wrapper">
        <div class="search-btn">
            <span class="fa fa-search"></span>
        </div>
        <div class="search-data">
            <input type="text" required>
            <div class="line"></div>
            <label for="">type to search..</label>
            <span class="fa fa-search"></span>

        </div>
    </div>


    <script>
        $(".search-btn").click(function () {
            // 点击按钮背景变颜色
            $(".wrapper").addClass("active");
            // 显示完背景搜索按钮变不见
            $(this).css("display", "none");
            // 显示搜索框
            $(".search-data").fadeIn(500);
            $(".close-btn").fadeIn(500);
            $(".search-data .line").addClass("active");
            setTimeout(function () {
                $("input").focus();
                $(".search-data label").fadeIn(500);
                $(".search-data span").fadeIn(500);
            }, 800);
        });
        $(".close-btn").click(function () {
            $(".wrapper").removeClass("active");
            $(".search-btn").fadeIn(800);
            $(".search-data").fadeOut(500);
            $(".close-btn").fadeOut(500);
            $(".search-data .line").removeClass("active");
            $("input").val("");
            $(".search-data label").fadeOut(500);
            $(".search-data span").fadeOut(500);
        });
    </script>


</body>

</html>